<template>
  <div style="padding: 10px">
    <el-card>
      <div v-for="item in videos" :key="item.id" style="margin: 10px 0; padding: 10px 0; color: #666; border-bottom: 1px dashed #ccc">
        <span style="font-size: 18px; cursor: pointer" class="item" @click="detail(item.id)">{{ item.name }}</span>
        <span style="float: right; font-size: 12px; margin-top: 10px">文件大小：{{ item.size }} kb</span>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "Video",
  data() {
    return {
      videos: []
    }
  },
  created() {
    this.request("/echarts/file/front/all").then(res => {
      console.log(res.data)
      this.videos = res.data.filter(v => v.type === 'mp4')
    })
  },
  methods: {
    detail(id) {
      this.$router.push({path: "/front/videoDetail", query: {id: id}})
    }
  }
}
</script>

<style>
/*鼠标放上去变色*/
.item:hover{
  color: #3a8ee6;
  background: none;
}
</style>
<!--这段代码是一个Vue单文件组件，主要实现了一个简单的视频列表功能，其主要结构如下：-->

<!--<template> 标签：用来定义模板，其中包含了组件的 HTML 代码，其中包含了一个 <div> 标签和一个 el-card 标签，用来显示视频列表。-->

<!--  v-for 指令：用于循环渲染数据，针对 videos 数组进行循环，对每一个视频信息包装成一个 <div> 元素，从而实现了视频列表。-->

<!--    :key 属性：给每一个循环出来的视频元素指定唯一标识，便于 Vue 进行渐进式渲染优化。-->

<!--    @click 指令：用于绑定点击事件，当用户点击 item 链接时，会触发 detail() 方法。-->

<!--    export default：这是ES6模块的一个关键字，用于导出模块。-->

<!--    name 属性：定义组件的名称。-->

<!--    data 属性：定义组件的数据，即 videos 数组，是用于存储视频列表信息的。-->

<!--    created() 方法：在组件被创建后立即执行，向服务器请求视频列表信息，并过滤出类型为 mp4 的视频信息。-->

<!--    methods 属性：定义方法集合，目前只有一个 detail() 方法，当用户点击视频列表中某个视频时执行该方法，跳转到对应的视频详情页面。-->

<!--    <style> 标签：用来定义组件的 CSS 样式。-->